<template>
  <div class="layerTree">
    <div style="margin-bottom:15px;">
      <el-input clearable placeholder="输入图层名称过滤" v-model="filterText" ref="layer_filter_input"></el-input>
    </div>
    <!--图层树-->
    <el-tree
      class="filter-tree"
      show-checkbox
      render-after-expand
      highlight-current
      node-key="_id"
      :data="layerTree"
      :props="defaultProps"
      :default-expanded-keys="[1]"
      :filter-node-method="filterNode"
      ref="tree2"
      @check="nodeCheck"
    >
       <span slot-scope="{node,data}">
        <i v-if="data.layers" class="treeGroupIcon kfb-icon-leimu" />
        <i v-if="!data.layers" class="treeItemIcon kfb-icon-kehuxinxiliebiao" />
        <span v-if="data.layers" class="treeGroup">{{ node.label }}</span>
        <span
          v-if="!data.layers"
          :disabled="!data.isVisible"
          class="treeItem"
          @click="layerLocateTo($event,data)"
        >{{ node.label }}</span>

        <!--<div style="float:right;margin-top:4px;margin-right:3px;">-->
          <!--<el-button-->
            <!--v-if="!data.layers && data.isVisible"-->
            <!--:disabled="data.attribute===''"-->
            <!--type="success"-->
            <!--icon="el-icon-message"-->
            <!--circle-->
            <!--@click="attributesQuery($event,data)"-->
          <!--/>-->
        <!--</div>-->
        <div style="float:right;margin-top:4px;margin-right:3px;">
          <el-button
            v-if="!data.layers && data.isVisible"
            type="success"
            icon="el-icon-picture"
            circle
            @click="showLegend($event,data)"
          />
        </div>
        <el-slider
          v-if="!data.layers && data.isVisible && !data.type"
          v-model="data.alpha"
          @change="change($event,data)"
        />
      </span>
    </el-tree>

  </div>
</template>
<script>
  import {mapState,mapGetters} from 'vuex';

  export default {
    watch: {
      filterText(val) {
        this.$refs.tree2.filter(val);
      }
    },
    methods: {
      /**
       * 图层过滤
       * @param value
       * @param data
       * @returns {boolean}
       */
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      /**
       * 控制图层开闭
       * @param data
       * @param Node
       */
     async nodeCheck(data, Node) {

        if (data.layers) {
          for (let i = 0; i < data.layers.length; i++) {
            const layer = data.layers[i];
            const isVisible = Node.checkedKeys.indexOf(layer._id) > 0;
            layer.isVisible = isVisible;
            const bid = this.findNearVisibleLayerId(layer);
            await this.mapService.setLayerVisible(isVisible, layer, bid ? bid.id : undefined);
            layer.alpha = 0;
          }
        } else {
          const isVisible = Node.checkedKeys.indexOf(data._id) >= 0;
          data.isVisible = isVisible;
          const bid = this.findNearVisibleLayerId(data);
          await this.mapService.setLayerVisible(isVisible, data, bid ? bid.id : undefined);
          data.alpha = 0;
        }
      },
      /**
       * 设置透明度
       * @param $event
       * @param data
       */
      change($event,data){
        data.alpha = $event;
        this.mapService.setOpacityValue(1- $event / 100,data)
      },
      /**
       * 属性查询
       */
      attributesQuery($event,layer){
        // this.$store.commit('setCurrentSearchLayer',layer);
        // this.$store.commit('setAttributeTable',true);
      },
      /**
       *
       * 图层定位
       * @param $event
       * @param data
       */
      layerLocateTo($event,data){
        this.mapService.setMapBoundsByLayerBounds(data);
      },
      /**
       * 查找最近打开图层
       */
      findNearVisibleLayerId(layer) {
        let index = 0;
        for (let i = this.allLayers.length - 1; i >= 0; i--) {
          if (layer._id === this.allLayers[i]._id) {
            index = i;
            continue;
          }
          if (index > i && this.allLayers[i].param && this.allLayers[i].param.isAdd) {
            return this.allLayers[i].param;
          }
        }
        return undefined;
      }
    },
    data() {
      return {
        filterText: "",                 //过滤
        defaultProps: {
          children: "layers",
          label: "name",
        }
      };
    },
    computed: {
      ...mapGetters('user',['allLayers','layerTree']),
      ...mapState({
        /**
         * mapService
         * @param state
         * @returns {mapService|(function(*))|MapService|*}
         */
        mapService(state){
          return state.sjwh.mapService;
        }
      })
    },
    mounted(){
      this.$nextTick(()=>{
        this.$refs['layer_filter_input'].focus();
      })
    }
  };
</script>

<style>
.layerTree .el-checkbox__inner {
  border-color: #409eff;
}

.layerTree .el-tree-node__children .el-tree-node__content {
  height: auto;
  padding:4px;
}

.layerTree .el-main {
  padding: 0px;
}

 .el-input__inner {
  border-radius: 0px;
}

.layerTree .el-tree-node__content {
  display: block;
}

.layerTree .el-slider__runway {
  width: 80%;
  margin: 5px 20px;
  margin-left: 52px;
  height: 3px;
}

.layerTree .el-button.is-circle {
  padding: 2px;
}

.layerTree .el-slider__bar {
  height: 3px;
}

.layerTree .el-slider__button {
  width: 10px;
  height: 10px;
}

.layerTree .el-slider__button-wrapper {
  top: -13px;
  height: 30px;
  width: 30px;
}

.layerTree .el-button {
  font-size: 5px;
}

.treeGroupIcon {
  font-size: 16px;
  color: #409eff;
}

.treeItemIcon {
  font-size: 13px;
  color: #409eff;
}

.treeGroup {
  font-size: 14px;
  color: #333;
  /* font-weight: bold; */
  font-family: "Microsoft YaHei"
  /* color: #409eff */
}

.treeItem {
  font-size: 13px;
  color:#919192;
    font-family: "Microsoft YaHei"

  /* color:#d9e9ff; */
}
</style>


